<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="success">导入</el-button>
      <el-button type="info">导出</el-button>
    </div>
    <div  style="margin: 10px 0;display: flex">
      <el-input type="text" v-model="searchWord" placeholder="请输入关键词" clearable style="flex: 1;margin-right: 5px"></el-input>
      <el-button type="info" @click="load"  >搜索</el-button>
    </div>
    <el-table :data="tableData"
            border
            style="width: 100%">
      <el-table-column
              prop="id"
              label="ID"
              width="80">
      </el-table-column>
      <el-table-column
              prop="username"
              label="username"
              width="180">
      </el-table-column>
      <el-table-column
              prop="nickName"
              label="nickName"
              width="180">
      </el-table-column>
      <el-table-column
              prop="age"
              label="age"
              width="80">
      </el-table-column>
      <el-table-column
              prop="sex"
              label="sex"
              width="80">
      </el-table-column>
      <el-table-column
              prop="address"
              label="地址" width="280">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                        width="200px">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin: 10px 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:currentPage="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total">
    </el-pagination>
  </div>

  <el-dialog title="新增" v-model="dialogVisible" width="30%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="nickName">
        <el-input v-model="form.nickName"></el-input>
      </el-form-item>
      <el-form-item label="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
  </el-dialog>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";

export default {
  name: 'Home',
  components: {

  },
  data(){
    return {
      dialogVisible: false,
      form: {},
      pageSize:10,
      currPageNum:1,
      searchWord:'',
      total:0,
      tableData: []
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currPageNum = val;
      this.load();
    },
    add(){
      this.dialogVisible = true;
      form = {};
    },
    save(){
      this.dialogVisible = false;
      if(this.form.id === ''){
        //没有id
        request.post("/api/user",this.form).then(res=>{
          alert("保存ok")
        });
      }else{
        request.put("/api/user",this.form).then(res=>{
          if(res.code==='0'){
            this.$message({message:'修改成功',duration:1000,type:"success"});
          }else{
            this.$message({message:'修改失败',duration:1000,type:"error"});
          }
        });
      }

      this.load();
    },
    load(){
      request.get("/api/user",{
        params:{
          currPageNum : this.currPageNum ,
          pageSize : this.pageSize,
          searchWord: this.searchWord
        }
      }).then(res =>{
        console.log("返回的结果：",res);
         this.tableData = res.data.records;
         this.total = res.data.total;
      })
    },
    handleEdit(row){
      console.log(JSON.stringify(row));
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;

    },
    handleDelete(id){
      request.delete("/api/user/"+id).then(res =>{
        if(res.code==='0'){
          this.$message({message:'删除成功',duration:1000,type:"success"});
        }else{
          this.$message({message:'删除失败',duration:1000,type:"error"});
        }
      });
      this.load();
    }
  },
  created(){
    this.load();
  }
}
</script>
